<link rel="stylesheet" type="text/css" href="./assets/public/css/dataErasure.css">
<link rel='icon' type='image/x-icon' href="./assets/public/images/JuiceShop_Logo_50px.png">
<link rel="stylesheet" href='https://code.getmdl.io/1.3.0/material.min.css'>
<link rel="stylesheet" href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700' type='text/css'>
<div class="header">
    <a href="./#/"><i class='material-icons'>arrow_back</i></a>
    <a href="./#/" class="back"><span>Back</span></a>
    <a href="./#/" class=""><img src="./assets/public/images/JuiceShop_Logo.png" alt=""></a>
    <a href="./#/"><span class="header-text">OWASP Juice Shop</span></a>
</div>
<div class="main-content">
    <div class="formBlock">
        <h4>Data Erasure Request (Art. 17 GDPR)</h4>
        <p>We take data security, customer privacy, and legal compliance very serious. In accordance with GDPR we allow
            you to request complete erasure of your account and any associated data.</p>
        <h5>Request Data Erasure</h5>
        <form action="/dataerasure" method="POST">
            <div>
                <label for="email">Confirm Email Address</label>
                <input type="email" required placeholder={{userEmail}} name="email" id="email">
            </div>
            <div>
                <label for="securityAnswer">Answer</label>
                <input type="text" required placeholder="{{securityQuestion}}" id="securityAnswer"
                    name="securityAnswer">
            </div>
            <div class="deleteButton">
            <button type="submit" class=" mdl-button mdl-button--raised" style="background-color:#546E7A; color: #FFFFFF;">
                <span class="cross">&times;</span>
            Delete User Data</button>
            </div>
        </form>
    </div>
</div>